<template>
  <scroll-view
    class="tabs-wrap"
    :style="`background-color: ${prop.bg}`"
    scroll-x="true"
    :scroll-left="data.scrollLeft"
    scroll-with-animation="true"
    @scroll="scroll">
    <view
      class="tabs-item"
      :class="{ 'select-item': data.selectId === item.id, 'tabs-item2': prop.type === 2 }"
      :style="`width: ${prop.width * 2}rpx`"
      v-for="(item, index) in tabs"
      :key="item.id"
      @tap="tapSelect(item, index)">
      {{ item.name }}
    </view>
  </scroll-view>
</template>

<script lang="ts" setup>
import { watch } from 'vue';
interface Props {
  type?: number; //默认1，优惠券/开票tabs；2 订单tabs；3 客服中心tabs
  tabs: any; // tab数组{id:'',name:''}
  selectInx: string; // 默认选中项id
  width?: any; // 子项宽度
  bg?: string; // 背景
}
const prop = withDefaults(defineProps<Props>(), {
  type: 1,
  tabs: [] as any,
  selectInx: '',
  width: 80,
  bg: '#fff',
});

const data = reactive({
  selectId: prop.selectInx,
  scrollLeft: '0px' as string, // 滚动条左锚点
  scrollDetail: {} as any, // 滚动条信息
  itemInfo: {} as any, // 元素信息
});
// 获取元素信息
const { proxy: vm } = getCurrentInstance()!;
const query = uni.createSelectorQuery().in(vm);
nextTick(() => {
  query
    .selectAll('.tabs-wrap, .tabs-item')
    .boundingClientRect((info: any) => {
      if (Array.isArray(info)) {
        data.itemInfo.width = Number(info[0].width);

        data.itemInfo.itemWidth = Number(info[1].width);
        data.itemInfo.space = Number(info[1].top * 2);
        data.itemInfo.left = Number(info[1].left);
      }
    })
    .exec();
});

const scroll = (e: any) => {
  data.scrollDetail = e.detail;
  // data.scrollLeft = `${e.detail.scrollLeft}px`;
};

const emit = defineEmits(['set-select']);
//选中事件
const tapSelect = (item: any, inx: any) => {
  console.log('tt----', item.id);
  data.selectId = item.id;
  emit('set-select', data.selectId);
  // 当前元素左坐标=左间距+inx*（宽度+间距)
  // 当前元素右坐标=当前元素左坐标 + 宽度
  // 如果 (元素左坐标/元素右坐标 + 滚动调左坐标) 大于 宽度， 滚动条左坐标=元素右坐标-宽度
  // 如果 (元素左坐标 + 滚动调左坐标) 小于  0，滚动条左坐标需要为0
  const sl = -Number(data.scrollDetail.scrollLeft || 0);
  const lx = data.itemInfo.left + inx * (data.itemInfo.itemWidth + data.itemInfo.space);
  const rx = lx + data.itemInfo.itemWidth;
  if (lx + sl < 0) {
    data.scrollLeft = `${data.scrollDetail.scrollLeft}px`;
    nextTick(() => {
      data.scrollLeft = '0px';
    });
  } else if (lx + sl > data.itemInfo.width || rx + sl > data.itemInfo.width) {
    data.scrollLeft = `${data.scrollDetail.scrollLeft}px`;
    nextTick(() => {
      data.scrollLeft = `${rx - data.itemInfo.width + data.itemInfo.space}px`;
    });
  }
};
//返回选中值，给父页面使用
const getSelect = () => {
  return data.selectId;
};
const setSelect = (id: any) => {
  data.selectId = id;
};

watch(
  () => prop.selectInx,
  (newVal, oldVal) => {
    data.selectId = newVal;
  }
);
defineExpose({
  getSelect,
  setSelect,
});
</script>

<style lang="scss">
.tabs-wrap {
  display: flex;
  align-items: center;
  position: relative;
  // margin: 0 10px;
  width: 100vw;
  // text-align: center;
  word-break: keep-all; /* 不换行 */
  white-space: nowrap; /* 不换行 */

  .tabs-item {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 29px;
    width: 80px;
    margin: 12px 5px;
    line-height: 20px;
    color: #545454;
    font-size: 12px;
    background-color: #f2f2f2;
    border-radius: 23px;
    box-sizing: border-box;
  }

  .tabs-item2 {
    background-color: #fff;
    border: 1px solid $uni-color-primary;
  }

  .tabs-item:first-child {
    margin-left: 12px;
  }
  .tabs-item:last-child {
    margin-right: 12px;
  }

  .select-item {
    background-color: $uni-color-primary;
    color: #fff;
  }
}
</style>